<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户:">
            <el-input v-model="form.userName" />
        </el-form-item>

        <el-form-item label="密码:">
            <el-input v-model="form.userPwd" show-password/>
        </el-form-item>


        <el-form-item label="选择角色">
            <el-checkbox-group v-model="form.roleName">
                <el-checkbox value="admin">
                    admin
                </el-checkbox>
                <el-checkbox value="教师">
                    教师
                </el-checkbox>
                <el-checkbox value="学生">
                    学生
                </el-checkbox>
                <el-checkbox value="boos">
                    boos
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit()">保存</el-button>
            <el-button type="info" @click="addInfo()">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'

import { xieInfo, postinfo } from '@/Http/axiosInfo'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
// do not use same name with ref
const form = reactive({

    "userName": "",
    "userPwd": "",
    "phone": "15985693251",
    "nickName": "张三",
    "roleName": <any>[]

})

const onSubmit = () => {
    form.roleName = form.roleName.join(",")
    xieInfo.post('/ManUser/AddUser', {
        user: form

    })
        .then((res) => {
            if (res.data.code == 200) {
                ElMessage.success('添加成功');
                router.push('/GetUser')
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}


const addInfo = () => {
    router.push({ path: '/GetUser' })
}


</script>